<template>
  <div class="data-generation-monitor">
    <div class="monitor-header">
      <h3>数据生成监控</h3>
      <div class="header-actions">
        <el-switch v-model="realTimeMode" active-text="实时" inactive-text="历史" />
      </div>
    </div>
    
    <div class="monitor-content">
      <!-- 雷达回波生成进度 -->
      <div class="progress-section">
        <div class="section-title">雷达回波数据生成</div>
        <div class="progress-container">
          <el-progress
            :percentage="radarProgress"
            :stroke-width="1.5"
            status="success"
            :show-text="false"
          />
          <span class="progress-text">{{ radarProgress }}% ({{ radarGenerated }}TB/{{ radarTotal }}TB)</span>
        </div>
        <div class="generation-stats">
          <div class="stat-item">
            <span class="stat-label">生成速度:</span>
            <span class="stat-value">{{ radarSpeed }} GB/s</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">样本数量:</span>
            <span class="stat-value">{{ radarSamples.toLocaleString() }}</span>
          </div>
        </div>
      </div>

      <!-- SAR图像生成进度 -->
      <div class="progress-section">
        <div class="section-title">SAR图像数据生成</div>
        <div class="progress-container">
          <el-progress
            :percentage="sarProgress"
            :stroke-width="1.5"
            status="warning"
            :show-text="false"
          />
          <span class="progress-text">{{ sarProgress }}% ({{ sarGenerated }}TB/{{ sarTotal }}TB)</span>
        </div>
        <div class="generation-stats">
          <div class="stat-item">
            <span class="stat-label">生成速度:</span>
            <span class="stat-value">{{ sarSpeed }} GB/s</span>
          </div>
          <div class="stat-item">
            <span class="stat-label">图像数量:</span>
            <span class="stat-value">{{ sarImages.toLocaleString() }}</span>
          </div>
        </div>
      </div>

      <!-- 实时生成图表 -->
      <div class="chart-container">
        <div ref="generationChart" class="generation-chart"></div>
      </div>

      <!-- 资源使用监控 -->
      <div class="resource-monitor">
        <div class="resource-item">
          <span class="resource-label">CPU使用率:</span>
          <el-progress :percentage="cpuUsage" :stroke-width="1" status="success" />
        </div>
        <div class="resource-item">
          <span class="resource-label">内存使用率:</span>
          <el-progress :percentage="memoryUsage" :stroke-width="1" status="warning" />
        </div>
        <div class="resource-item">
          <span class="resource-label">GPU使用率:</span>
          <el-progress :percentage="gpuUsage" :stroke-width="1" status="exception" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import * as echarts from 'echarts'

// 响应式数据
const realTimeMode = ref(true)
const radarProgress = ref(75.6)
const sarProgress = ref(42.3)
const radarGenerated = ref(15.12)
const radarTotal = ref(20)
const sarGenerated = ref(8.46)
const sarTotal = ref(20)
const radarSpeed = ref(2.4)
const sarSpeed = ref(1.8)
const radarSamples = ref(2547832)
const sarImages = ref(156743)
const cpuUsage = ref(68)
const memoryUsage = ref(83)
const gpuUsage = ref(91)

// 图表相关
const generationChart = ref(null)
let chartInstance = null
let updateTimer = null

// 初始化图表
const initChart = () => {
  if (!generationChart.value) return
  
  chartInstance = echarts.init(generationChart.value)
  
  const option = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(0, 0, 0, 0.8)',
      borderColor: '#00f5ff',
      textStyle: { color: '#ffffff' }
    },
    legend: {
      data: ['雷达回波', 'SAR图像'],
      textStyle: { color: '#ffffff', fontSize: '1vw' },
      top: '5%'
    },
    grid: {
      left: '8%',
      right: '8%',
      bottom: '15%',
      top: '20%'
    },
    xAxis: {
      type: 'category',
      data: Array.from({length: 24}, (_, i) => `${i}:00`),
      axisLine: { lineStyle: { color: '#00f5ff' } },
      axisLabel: { color: '#ffffff', fontSize: '0.8vw' }
    },
    yAxis: {
      type: 'value',
      name: '生成速度(GB/s)',
      nameTextStyle: { color: '#ffffff', fontSize: '0.9vw' },
      axisLine: { lineStyle: { color: '#00f5ff' } },
      axisLabel: { color: '#ffffff', fontSize: '0.8vw' },
      splitLine: { lineStyle: { color: 'rgba(0, 245, 255, 0.3)' } }
    },
    series: [
      {
        name: '雷达回波',
        type: 'line',
        data: generateRandomData(24, 1.5, 3.5),
        smooth: true,
        lineStyle: { color: '#00ff00', width: 2 },
        areaStyle: { 
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(0, 255, 0, 0.3)' },
            { offset: 1, color: 'rgba(0, 255, 0, 0.1)' }
          ])
        }
      },
      {
        name: 'SAR图像',
        type: 'line',
        data: generateRandomData(24, 1.0, 2.5),
        smooth: true,
        lineStyle: { color: '#ffaa00', width: 2 },
        areaStyle: { 
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(255, 170, 0, 0.3)' },
            { offset: 1, color: 'rgba(255, 170, 0, 0.1)' }
          ])
        }
      }
    ]
  }
  
  chartInstance.setOption(option)
}

// 生成随机数据
const generateRandomData = (count, min, max) => {
  return Array.from({length: count}, () => 
    (Math.random() * (max - min) + min).toFixed(2)
  )
}

// 更新数据
const updateData = () => {
  if (realTimeMode.value) {
    // 模拟数据更新
    radarProgress.value = Math.min(100, radarProgress.value + Math.random() * 0.5)
    sarProgress.value = Math.min(100, sarProgress.value + Math.random() * 0.3)
    radarSpeed.value = (2.4 + (Math.random() - 0.5) * 0.5).toFixed(1)
    sarSpeed.value = (1.8 + (Math.random() - 0.5) * 0.3).toFixed(1)
    cpuUsage.value = Math.max(50, Math.min(95, cpuUsage.value + (Math.random() - 0.5) * 10))
    memoryUsage.value = Math.max(60, Math.min(98, memoryUsage.value + (Math.random() - 0.5) * 8))
    gpuUsage.value = Math.max(70, Math.min(99, gpuUsage.value + (Math.random() - 0.5) * 6))
  }
}

onMounted(async () => {
  await nextTick()
  initChart()
  
  // 启动数据更新定时器
  updateTimer = setInterval(updateData, 3000)
})

onUnmounted(() => {
  if (chartInstance) {
    chartInstance.dispose()
  }
  if (updateTimer) {
    clearInterval(updateTimer)
  }
})
</script>

<style scoped>
.data-generation-monitor {
  height: 42vh;
  background: rgba(0, 0, 0, 0.4);
  border-radius: 1vh;
  padding: 1.5vh 1.5vw;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 245, 255, 0.3);
  display: flex;
  flex-direction: column;
}

.monitor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1vh;
  padding-bottom: 1vh;
  border-bottom: 1px solid rgba(0, 245, 255, 0.3);
}

.monitor-header h3 {
  color: #00f5ff;
  font-size: 1.4vw;
  margin: 0;
  text-shadow: 0 0 10px rgba(0, 245, 255, 0.5);
}

.monitor-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1vh;
}

.progress-section {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 0.5vh;
  padding: 1vh 1vw;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.section-title {
  color: #ffffff;
  font-size: 1.1vw;
  font-weight: bold;
  margin-bottom: 0.8vh;
}

.progress-container {
  display: flex;
  align-items: center;
  gap: 1vw;
  margin-bottom: 0.8vh;
}

.progress-text {
  color: #00ff00;
  font-size: 1vw;
  font-weight: bold;
  min-width: 12vw;
}

.generation-stats {
  display: flex;
  gap: 2vw;
}

.stat-item {
  display: flex;
  gap: 0.5vw;
}

.stat-label {
  color: #cccccc;
  font-size: 0.9vw;
}

.stat-value {
  color: #00ff00;
  font-size: 0.9vw;
  font-weight: bold;
}

.chart-container {
  flex: 1;
  min-height: 15vh;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 0.5vh;
  border: 1px solid rgba(0, 245, 255, 0.2);
}

.generation-chart {
  width: 100%;
  height: 15vh;
}

.resource-monitor {
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
  padding: 1vh;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 0.5vh;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.resource-item {
  display: flex;
  align-items: center;
  gap: 1vw;
}

.resource-label {
  color: #ffffff;
  font-size: 0.9vw;
  min-width: 6vw;
}

:deep(.el-progress) {
  flex: 1;
}

:deep(.el-progress-bar__outer) {
  background-color: rgba(255, 255, 255, 0.1);
}

:deep(.el-switch) {
  --el-switch-on-color: #00f5ff;
  --el-switch-off-color: #666666;
}
</style>